<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .container {
            width: 600px;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <canvas id="canvas" width="1200" height="600" style="background:#000; width: 600px; height: 300px;"></canvas>
    </div>

    <script src="atom.js"></script>
    <script>
        window.onload = function() {
            var canvas = document.getElementById('canvas')
            var ctx = canvas.getContext('2d')
            var words = ['测试文本1','测试文本2','测试文本3','测试文本4','测试文本5','测试文本6','测试文本7','测试文本8','测试文本9','测试文本10']
            var CW = canvas.width;
            var CH = canvas.height;
            var centerX = CW/2;
            var centerY = CH/2;
            
            var atoms = createAtom().reverse()

            function createAtom() {
                var atoms = []
                words.forEach(function (word) {
                    var atom = new Atom({
                        x: rand(600, 1000),
                        y: rand(50, 250),
                        text: word,
                        textColor: '#fff',
                        // bgColor: randColor(),
                        fontSize: Math.round(Math.random()*40 + 10),
                        speed: rand(1,3),
                        isNeedBg: true
                    })
                    atoms.push(atom)
                })
                return atoms
            }

            function rand(n, m) {
                return Math.random()*(m-n) + n
            }

            function randColor() {
                return '#'+Math.floor(Math.random()*0xffffff).toString(16);
            }

            function draw(atoms) {
                atoms.forEach(function(atom) {
                    atom.x -= atom.speed
                    if(atom.x < -atom.width) {
                        atom.x = rand(600, 1000)
                        atom.y = rand(50, 250)
                    }
                    atom.draw(ctx)
                })
            }

            (function drawFrames() {
                window.requestAnimationFrame(drawFrames)
                ctx.clearRect(0, 0, CW, CH)
                draw(atoms)
            })()
            
            
        }
    </script>
</body>
</html>